/**
 * jQuery successiveAppearance
 * 
 * Copyright 2009 Michael Moiseyev http://domdev.ru
 * 
 * Licensed under the MIT licence:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * This is test file only!
 * The main idea was sequential showing of some elements, when the images in this elements
 * has been loaded. 
   But:
   click on big image to go to other page, then click Back, and u don't see appearing, 
   because onload event doesn't fire at all.
   So i add "getTime" to the src, but it's not right way.
   
 *
 */
 
;(function($) {
	d = new Date();
	jQuery.fn.successiveAppearance = function (){
      var $this = $(this).css({opacity:0});
      var c = 0;
	   $this.each(function() {
			{	this.src += '?' + d.getTime();}
	      this.onload = function(e){
	         if(++c == $this.length){ // if counter of loaded images eq length of images
	            $.fn.successiveAppearance.startAppearing($this);
	         }
	      };
			this.onerror = function(e){ // if error has occured while loading image just omit this el
	         $(this).trigger('load');
	      };
	   });
      return this;
	};//successiveAppearance
	
	$.fn.successiveAppearance.startAppearing = function(obj) {
      var i = 0;
      obj.eq(i).animate({
         opacity: 1
      }, 500, function( ){
         obj.eq(++i).animate({
            opacity: 1
         }, 500, arguments.callee )
      });
	};//startAppearing

})(jQuery);